<template>
  <div class="home">
    <div class="appbtn">
       <div class="close">x</div>
       <div class="taro-img logo">
         <img src="../image/cktlogo.jpg" alt="">
       </div>
       <div class="btn">App内打开</div>
    </div>
    <router-link to="/search">
      <div class="home-box">
        <div class="box">
      <span class="el-icon-zoom-in"></span>
       <span class="span">200000+ 免费模板任你搜索</span>
    </div>
      </div>
    </router-link>
     <div class="block">
    <el-carousel trigger="click" height="150px">
      <el-carousel-item v-for="(item,index) in list" :key="index">
        <img :src="item.designTemplateImageUrl" alt="" class="small">
      </el-carousel-item>
    </el-carousel>
    </div>
    <ul class="ul">
      <li v-for="(b,i) in list1" :key="i" class="lin">
        <router-link :to="{
          path:'/posters/'+b.designKindId
        }">
        <img :src="b.thumbUrl" alt="">
         <p class="p">{{b.name}}</p>
        </router-link>
      </li>
    </ul>
    <div class="count">
      <div class="Posters">
        <p class="p3">推荐专题</p>
        <ul>
          <li v-for="(b,i) in list2" :key="i" class="li">
            <router-link :to="{
              path:'/project/'+b.id
            }">
            <p class="p1">{{b.title}}</p>
            <p class="p2">{{b.themeDescribe}}</p>
            <div class="colorBar"></div>
            </router-link>
          </li>
        </ul>
      </div>
    </div>
    <div class="Mobile">
      <div class="div">
      <div v-for="(item,index) in list3" :key="index">
           <p class="div-p">{{item.name}}  
        <router-link :to="{
          path:'/posters/'+item.kindId
        }">
          <span class="div-span">进入场景</span>
        </router-link>
        </p>
           <ul>
             <li v-for="(b,i) in item.templates" :key="i" class="li3">
               <router-link :to="{
               path:'/detailpage/'+b.designTemplateId}">
             <img :src="b.designTemplateImageUrl" alt="" class="img">
             </router-link>
           </li>
           </ul>
          <div class="div-btn">
            <router-link :to="{
              path:'/posters/'+item.kindId
             }">
             <div class="btn-item">更多</div>
            </router-link>
            <div class="btn-item1" @click="btn(item,index)">换一批</div>
          </div>
        </div>
      </div>
      <div class="div">
        <div v-for="(item,index) in list4" :key="index" class="div-for">
           <p class="div-p">{{item.name}} 
            <router-link :to="{
              path:'/posters/'+item.kindId
             }">
             <span class="div-span">进入场景</span>
            </router-link>
             </p>
           <ul>
             <li v-for="(b,i) in item.templates" :key="i" class="li3">
              <router-link :to="{
               path:'/detailpage/'+b.designTemplateId}">
             <img :src="b.designTemplateImageUrl" alt="" class="img">
              </router-link>
           </li>
           </ul>
          <div class="div-btn">
            <router-link :to="{
              path:'/posters/'+item.kindId
             }">
             <div class="btn-item">更多</div>
            </router-link>
            <div class="btn-item1" @click="btn(item,index)">换一批</div>
          </div>
        </div>
      </div> 
      <div class="div">
        <div v-for="(item,index) in list5" :key="index" class="div-for-3">
           <p class="div-p">{{item.name}} 
              <router-link :to="{
              path:'/posters/'+item.kindId
             }">
             <span class="div-span">进入场景</span>
              </router-link>
             </p>
           <ul>
             <li v-for="(b,i) in item.templates" :key="i" class="li3">
              <router-link :to="{
               path:'/detailpage/'+b.designTemplateId}">
             <img :src="b.designTemplateImageUrl" alt="" class="img">
              </router-link>
           </li>
           </ul>
          <div class="div-btn">
            <router-link :to="{
              path:'/posters/'+item.kindId
             }">
             <div class="btn-item">更多</div>
            </router-link>
            <div class="btn-item1" @click="btn(item,index)">换一批</div>
          </div>
        </div>
      </div> 
      <div class="div">
        <div v-for="(item,index) in list6" :key="index" class="div-for-3">
           <p class="div-p">{{item.name}} 
              <router-link :to="{
              path:'/posters/'+item.kindId
             }">
             <span class="div-span">进入场景</span>
              </router-link>
             </p>
           <ul>
            <li v-for="(b,i) in item.templates" :key="i" class="li3">
             <router-link :to="{
               path:'/detailpage/'+b.designTemplateId}">
             <img :src="b.designTemplateImageUrl" alt="" class="img">
            </router-link>
           </li>
           </ul>
          <div class="div-btn">
            <router-link :to="{
              path:'/posters/'+item.kindId
             }">
             <div class="btn-item">更多</div>
            </router-link>
            <div class="btn-item1" @click="btn(item,index)">换一批</div>
          </div>
        </div>
      </div> 
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      list1: [],
      list2: [],
      list3: [],
      list4: [],
      list5: [],
      list6: [],
      num:2,
    };
  },
  methods: {
    getList() {
      this.$ajax
        .get("/abc/mobile/main/getMainMiniProgramHomeInfo.do")
        .then((res) => {
          this.list1 = res.data.body.data.scene.splice(0, 8);
          //  console.log(this.list1);
        });
    },
    getApp() {
      this.$ajax
        .get(
          "https://pub-cdn-oss.chuangkit.com/cache/today_recommend_template_v2/today_recommend_mobile_v2_20_50_1?v=1618750884000&_dataClientType=3&client_type=40"
        )
        .then((res) => {
          this.list = res.data.body.templates.splice(0, 4);
          // console.log(this.list);
        });
    },
    getPosters() {
      this.$ajax
        .get(
          "/abc/solutionSubject/theme.do?_dataType=json&_dataClientType=3&_dataClientType=3&client_type=40&solutionSubjectId=1&pageNum=1&pageSize=6&templatePageSize=6&type=3&device=2"
        )
        .then((res) => {
          this.list2 = res.data.body.data.themes;
          //  console.log(this.list2);
        });
    },
    getMobile() {
      this.$ajax
        .get("/abc/mobile/main/getSceneDetail.do?page_no=1")
        .then((res) => {
          this.list3 = res.data.body.data.sceneDetail;
          // console.log(this.list3);
        });
    },
    getHorizontal() {
      this.$ajax
        .get(
          "/abc/mobile/main/getSceneDetail.do?_dataType=json&_dataClientType=3&client_type=40&page_no=2"
        )
        .then((res) => {
          this.list4 = res.data.body.data.sceneDetail;
          // console.log(this.list4);
        });
    },
    getBusiness() {
      this.$ajax
        .get(
          "/abc/mobile/main/getSceneDetail.do?_dataType=json&_dataClientType=3&client_type=40&page_no=3"
        )
        .then((res) => {
          this.list5 = res.data.body.data.sceneDetail;
          // console.log(this.list5);
        });
    },
    getsuspension() {
      this.$ajax
        .get(
          "/abc/mobile/main/getSceneDetail.do?_dataType=json&_dataClientType=3&client_type=40&page_no=4"
        )
        .then((res) => {
          this.list6 = res.data.body.data.sceneDetail;
          // console.log(this.list6);
        });
    },
    btn(item,index){
    this.$ajax.get(`/efg/cache/today_recommend_template_v2/today_recommend_mobile_v2_${item.kindId}_6_${this.num++}?v=1663826544000&client_type=40&_dataClientType=3`).then(res=>{
       console.log(res);
       this.list3[index].templates=res.data.body.templates;
       this.list4[index].templates=res.data.body.templates;
       this.list5[index].templates=res.data.body.templates;
       this.list6[index].templates=res.data.body.templates;
    });
  }
  },
  created() {
    this.getList();
    this.getApp();
    this.getPosters();
    this.getMobile();
    this.getHorizontal();
    this.getBusiness();
    this.getsuspension();
  },
};
</script>
<style>
body {
  background-color: #eee;
}
a {
  text-decoration: none;
  color: #333;
}
.div-span {
  z-index: 99;
}
.home-box {
  width: 102%;
  height: 70px;
  background-color: #fff;
  position: sticky;
  top: 0px;
}
.appbtn {
  position: relative;
  z-index: 999999;
  top: 0;
  left: 0;
  width: 102%;
  height: 60px;
  background: #0773fc;
}
.appbtn .close {
  position: absolute;
  left: 0.68267rem;
  top: 0.34133rem;
  color: #fff;
}
.appbtn .logo {
  height: 40px;
  width: auto;
  margin-right: 132px;
  margin-top: 11px;
}
.taro-img {
  display: inline-block;
  overflow: hidden;
  width: 60px;
}
.logo img {
  min-width: 100%;
  height: 100%;
}
.appbtn .btn {
  position: absolute;
  right: 40px;
  top: 11px;
  width: 110px;
  height: 37px;
  line-height: 37px;
  font-size: 0.55467rem;
  color: #0773fc;
  background: #fff;
  box-shadow: 0 0.21333rem 0.32rem 0 rgb(0 0 0 / 5%);
  border-radius: 0.68267rem;
  text-align: center;
  z-index: 99;
}
.box {
  width: 95%;
  height: 40px;
  line-height: 40px;
  background-color: #eee;
  border-radius: 10px;
  font-size: 18px;
  position: relative;
  top: 15px;
  left: 10px;
}
.span {
  margin-left: 15px;
}
#nav a.router-link-exact-active {
  color: #42b983;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.small {
  width: 100%;
  height: 150px;
}
.ul {
  background-color: #fff;
  list-style: none;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 102%;
  height: 226px;
  overflow: hidden;
  margin: 5px 0px;
}
.el-carousel--horizontal {
  width: 102%;
}
.ul .lin {
  width: 19%;
  height: 90px;
  margin: 10px;
}
.ul .lin .p {
  font-size: 12px;
  width: 72px;
}
.ul .lin img {
  width: 57px;
  height: 57px;
}
.count {
  width: 102%;
  background-color: #fff;
}
.count .Posters ul {
  list-style: none;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  overflow: auto;
}
.count .Posters ul .li {
  width: 30%;
  margin: 0px 8px;
  height: 74px;
  display: inline-block;
  background-color: #fff;
  box-shadow: 0 0 10px 0 #eee;
  white-space: nowrap;
}
.count .p1 {
  color: #333;
  margin-top: 15px;
}
.p2 {
  font-size: 14px;
  color: #999999;
}
.count .p3 {
  margin-bottom: 10px;
}
.colorBar {
  width: 20px;
  height: 20px;
  border-radius: 0 0 0 100%;
  border-radius: 100% 0 0 0;
  /* background-color: blue; */
  margin: -7px 0 0 97px;
}
.Posters li:nth-child(1) .colorBar {
  background-color: red;
}
.Posters li:nth-child(2) .colorBar {
  background-color: blue;
}
.Posters li:nth-child(3) .colorBar {
  background-color: teal;
}
.Posters li:nth-child(4) .colorBar {
  background-color: yellow;
}
.Posters li:nth-child(5) .colorBar {
  background-color: tomato;
}
.Posters li:nth-child(6) .colorBar {
  background-color: green;
}
.div {
  width: 102%;
  background-color: #fff;
}
.div ul {
  list-style: none;
  height: 431px;
  display: flex;
  margin-top: 10px;
  justify-content: space-between;
  flex-wrap: wrap;
}
.div ul li {
  height: 203px;
}
img {
  width: 100%;
  height: 100%;
}
.div-for:nth-of-type(1) .li3 {
  width: 30%;
  height: 103px;
}
.div-for-3:nth-of-type(1) .li3 {
  width: 30%;
  height: 152px;
}
.div-for:nth-of-type(2) .li3,
.div-for-3:nth-of-type(2) .li3 {
  width: 46%;
  height: 95px;
}
.div-for-3:nth-of-type(2) ul {
  height: 325px;
}
.div-for:nth-of-type(1) ul {
  height: 240px;
  display: flex;
  justify-content: space-evenly;
}
.div-for:nth-of-type(2) ul,
.div-for-3:nth-of-type(1) ul {
  height: 344px;
  display: flex;
  justify-content: space-evenly;
}
.div-p {
  height: 50px;
  line-height: 50px;
  display: flex;
  color: #333;
  font-size: 20px;
  justify-content: space-between;
}
.div-span {
  font-size: 14px;
  color: #999999;
}
.div .div-btn {
  display: flex;
  height: 42px;
  justify-content: space-between;
  padding: 10px 0px;
}
.div .btn-item,.btn-item1 {
  width: 200px;
  height: 40px;
  line-height: 40px;
  background-color: #eee;
  border-radius: 14px;
}
.btn-item1 {
  margin: 0px 15px;
}
</style>
